import React, { useEffect, useState, version } from "react";
import axios from "axios";
import { Search, DropdownMenu } from "react-vant";
import { debounce } from "lodash";

export const option1 = [
  { text: "全部区域", value: "全部区域" },
  { text: "东城区", value: "东城区" },
  { text: "西城区", value: "西城区" },
  { text: "朝阳区", value: "朝阳区" },
  { text: "长安区", value: "长安区" },
  { text: "海淀区", value: "海淀区" },
  { text: "顺义区", value: "顺义区" },
];
export const option2 = [
  { text: "全部类型", value: "全部类型" },
  { text: "买卖经纪人", value: "买卖经纪人" },
  { text: "租赁经纪人", value: "租赁经纪人" },
];

export const option3 = [
  { text: "默认排序", value: "a" },
  { text: "按照销量排序", value: "b" },
  { text: "按照租赁排序", value: "c" },
  { text: "按照访问排序", value: "d" },
];

interface ListItemState {
  title: string;
  url: string;
  size: number;
  price: number;
  day: number;
  id: string;
  // 地区
  area: string;
  // 销售量
  sell: number;
  // 租赁量
  house: number;
  // 访问量
  look: number;
  // 类型
  type: string;
}

const MoreList = () => {
  const [list, setList] = useState<ListItemState[]>([]);
  const [value, setValue] = useState("");
  const [filterValue, setFilterValue] = useState<
    Record<string, string | number>
  >({});

  const fetchDataList = async (value: string) => {
    const resp = await axios.post("/api/more/list", { filterValue, value });
    setList(resp.data.data);
  };

  const debounceFetchList = debounce(fetchDataList, 2000);

  useEffect(() => {
    debounceFetchList(value);
  }, [filterValue]);
  return (
    <div>
      {/*搜索 */}
      <Search
        value={value}
        onChange={(v) => { debounceFetchList(v) }}
        placeholder="请输入搜索关键词"
      />
      {/* 筛选 */}
      <DropdownMenu value={filterValue} onChange={(v) => setFilterValue(v)}>
        <DropdownMenu.Item name="area" options={option1} />
        <DropdownMenu.Item name="type" options={option2} />
        <DropdownMenu.Item name="desc" options={option3} />
      </DropdownMenu>
      {/* 渲染 */}
      <div className="list">
        {list.map((v, i) => {
          return (
            <div key={i} style={{ display: "flex", padding: 10 }}>
              <img src={v.url} alt="" />
              <div style={{ flex: 1 }}>
                <h3>{v.title}</h3>
                <p style={{ display: "flex", justifyContent: "space-between" }}>
                  <span>总价：{v.price}</span>
                  <span>{v.area}</span>
                </p>
                <h4>{v.type}</h4>
                <h5>
                  销售量：{v.sell}-租赁量{v.house}-访问量{v.look}
                </h5>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default MoreList;
